<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单</title>
</head>
<style>
    ul{
    list-style: none;
}
header{
    height: 50px;
    line-height: 50px;
    background-color: #E3E4E5;
    border-bottom:1px solid #ddd ;
    width: 100%;
    margin: 0 auto;
}
header li{
    float: left;
    margin: 0px 18px;
}
.order_r i{
    font-size: 25px;
    color: black;
}
.order_l{
    float: left;
    font-size: 15px;
}
.order_r{
    float: right;
}
#searchtext{
    font-size: larger;
}
#biao{
    margin: auto;
}
#biao table tbody{
    overflow: auto;
}
tr th,td{
    width: 120px;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgb(200, 200, 200);
    border-right: 1px solid rgb(200, 200, 200);
}
a{
    text-decoration: none;
}
table.hovertable tr {
    background-color:#d4e3e5;
}
table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table{
    margin: 20px 20px;  

}  
tr{
    height: 70px;
} 
#form{
    display: flex;
    margin-left: 200px;
    margin-top: 30px;
}
div .a1{
    margin-left: 20px;
    display: inline-block;
}
#form>div{
    margin: 20px 0px;
    font-size: 20px;
}
#form button{
    font-size: 20px;
    margin-left: 30px;
    margin-top: 20px;
}
</style>
<body>
    <header>
        <div class="order_l">
            <ul>
                <li>全部订单</li>
                <li>待收款</li>
                <li>待支付</li>
                <li>待评价</li>
            </ul>
        </div>
        <div class="order_r">
        <input id="searchtext" type="text" placeholder="搜索">
        <i class="fa fa-search" aria-hidden="true"></i>
        </div>
    </header>
    <div id="biao">
        <table class="hovertable">
            <thead>
                <tr>
                    <th>订单号</th>
                    <th>客户名称</th>
                    <th>商品名称</th>
                    <th>订单金额</th>
                    <th>下单日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            <tr onmouseover="this.style.backgroundColor='#f5f5bf';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td>001</td>
                <td>bjt</td>
                <td>冰墩墩</td>
                <td>100</td>
                <td>20220304</td>
                <td>
                    <button onclick="show()">修改</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr onmouseover="this.style.backgroundColor='#f5f5bf';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td>002</td>
                <td>way</td>
                <td>雪容融</td>
                <td>90</td>
                <td>20220304</td>
                <td>
                    <button onclick="show()">修改</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr onmouseover="this.style.backgroundColor='#f5f5bf';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td>003</td>
                <td>wyb</td>
                <td>王一博周边</td>
                <td>85</td>
                <td>20220304</td>
                <td>
                    <button onclick="show()">修改</button>
                    <button>删除</button>
                </td>
            </tr> 
            <tr onmouseover="this.style.backgroundColor='#f5f5bf';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                <td>004</td>
                <td>xyl</td>
                <td>水冰月</td>
                <td>65</td>
                <td>20220304</td>
                <td>
                    <button onclick="show()">修改</button>
                    <button>删除</button>
                </td>
            </tr> 
            </tbody>
        </table>
    </div>

    <div id="form" style="display: none;">
        <div>订单号：<input class="a1" name="name"></div>
        <div>客户名称：<input name="pass"></div>
        <div>商品名称：<input name="pass"></div>
        <div>订单金额：<input name="pass"></div>
        <div>下单日期：<input name="pass"></div>
        <button onclick="save()">保存</button>
    </div>
    <script>
        function show(){
            document.getElementById("form").style.display="block";
            document.getElementById("biao").style.display="none";
               
        }
        function save(){
            alert(document.getElementById("name").value)
            alert(document.getElementById("age").value)
        }
    </script>
</body>
</html>